<!-- 首页 -->
<template>
  <div class="home" @mousemove="handleMouseMove" ref="homeRef">
    <div class="cards-container">
      <!-- Frame 1: 日期时间卡片 -->
      <el-card class="date-card glass-card">
        <div class="date-content">
          <div class="date-year">{{ currentDate.year }}年</div>
          <div class="date-month">{{ currentDate.month }}</div>
          <div class="date-number">{{ currentDate.day }}</div>
          <div class="date-text">{{ currentDate.weekday }}</div>
        </div>
      </el-card>

      <!-- Frame 2: 欢迎卡片 -->
      <el-card class="welcome-card glass-card">
        <div class="welcome-content">
          <div class="welcome-header">
            <div class="welcome-title">
              <span class="wave-emoji">👋</span> 欢迎来到
            </div>
            <div class="welcome-subtitle">我的个人空间</div>
            <div class="welcome-description">
              一个热爱技术的全栈开发者
              <div class="typing-text" ref="typingText"></div>
            </div>
          </div>
          <div class="social-links">
            <a href="https://github.com/yourusername" target="_blank" title="GitHub">
              <el-icon :size="20"><svg-github /></el-icon>
            </a>
            <a href="https://space.bilibili.com/yourid" target="_blank" title="哔哩哔哩">
              <el-icon :size="20"><svg-bilibili /></el-icon>
            </a>
            <a href="https://weixin.qq.com" target="_blank" title="微信">
              <el-icon :size="20"><svg-wechat /></el-icon>
            </a>
            <a href="mailto:your@email.com" title="邮件联系">
              <el-icon :size="20"><svg-email /></el-icon>
            </a>
          </div>
        </div>
      </el-card>

      <!-- Frame 3: 时钟卡片 -->
      <el-card class="clock-card glass-card">
        <div class="clock">
          <div class="analog-clock">
            <div class="clock-face">
              <!-- 时钟刻度 -->
              <template v-for="n in 60" :key="n">
                <div class="mark" :class="{ 'hour-mark': n % 5 === 0 }" :style="{ transform: `rotate(${n * 6}deg)` }">
                  <div class="mark-line"></div>
                </div>
              </template>
              <!-- 时钟指针 -->
              <div class="hand hour-hand" :style="hourHandStyle"></div>
              <div class="hand minute-hand" :style="minuteHandStyle"></div>
              <div class="hand second-hand" :style="secondHandStyle"></div>
              <div class="center-dot"></div>
            </div>
            <div class="digital-time">{{ digitalTime }}</div>
          </div>
        </div>
      </el-card>

      <!-- Frame 4: 博客卡片 -->
      <el-card class="blog-card glass-card">
        <div class="blog-content">
          <h3>博客文章</h3>
          <div class="blog-list">
            <div class="blog-item" v-for="i in 3" :key="i">
              <span class="blog-date">2024-03-{{ i.toString().padStart(2, '0') }}</span>
              <span class="blog-title">博客文章标题 {{ i }}</span>
            </div>
          </div>
        </div>
      </el-card>

      <!-- Frame 5: 精选项目卡片 -->
      <el-card class="project-card glass-card">
        <div class="project-content">
          <h3>精选项目</h3>
          <div class="project-list">
            <div class="project-item" v-for="i in 2" :key="i">
              <div class="project-header">
                <span class="project-title">项目名称 {{ i }}</span>
                <el-tag size="small">Vue3</el-tag>
              </div>
              <p class="project-desc">项目简短描述</p>
            </div>
          </div>
        </div>
      </el-card>

      <!-- Frame 6: 技能标签卡片 -->
      <el-card class="skills-card glass-card">
        <div class="skills-content">
          <h3>技能标签</h3>
          <div class="skills-list">
            <el-tag v-for="skill in skills" :key="skill" class="skill-tag">
              {{ skill }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import {
  Folder as SvgFolder,
  Coffee as SvgCoffee,
  Monitor as SvgMonitor,
  Connection as SvgConnection,
  DataAnalysis as SvgDataAnalysis,
  SetUp as SvgSetUp
} from '@element-plus/icons-vue'

const currentDate = ref({
  year: new Date().getFullYear(),
  month: new Date().toLocaleDateString('zh-CN', { month: 'long' }),
  day: new Date().getDate(),
  weekday: new Date().toLocaleDateString('zh-CN', { weekday: 'long' })
})

const skills = ref([
  'Vue3', 'TypeScript', 'Go', 'Docker',
  'Redis', 'MySQL', 'Git', 'Linux'
])

const digitalTime = ref('')
const hourHandStyle = ref('')
const minuteHandStyle = ref('')
const secondHandStyle = ref('')
const typingText = ref<HTMLElement | null>(null)

// 打字效果文本
const texts = [
  'Vue.js & React 前端开发',
  'Go & Node.js 后端开发',
  'Docker & K8s 容器化部署',
  '热爱开源，乐于分享'
]
let currentTextIndex = 0
let charIndex = 0
let typingInterval: number | null = null
let isDeleting = false
let typingSpeed = 100

// 打字效果
function typeText() {
  const currentText = texts[currentTextIndex]
  if (!typingText.value) return

  if (!isDeleting) {
    typingText.value.textContent = currentText.substring(0, charIndex + 1)
    charIndex++

    if (charIndex === currentText.length) {
      isDeleting = true
      typingSpeed = 2000 // 等待时间
    }
  } else {
    typingText.value.textContent = currentText.substring(0, charIndex - 1)
    charIndex--

    if (charIndex === 0) {
      isDeleting = false
      currentTextIndex = (currentTextIndex + 1) % texts.length
      typingSpeed = 100
    }
  }

  typingInterval = setTimeout(typeText, typingSpeed)
}

// 更新时钟
function updateClock() {
  const now = new Date()
  const hours = now.getHours()
  const minutes = now.getMinutes()
  const seconds = now.getSeconds()
  const milliseconds = now.getMilliseconds()

  // 计算精确的角度，包含毫秒级的平滑过渡
  const secondDegrees = ((seconds + milliseconds / 1000) * 6)
  const minuteDegrees = ((minutes + (seconds + milliseconds / 1000) / 60) * 6)
  const hourDegrees = ((hours % 12 + minutes / 60) * 30)

  // 使用 CSS transform 实现平滑旋转
  secondHandStyle.value = `transform: rotate(${secondDegrees}deg)`
  minuteHandStyle.value = `transform: rotate(${minuteDegrees}deg)`
  hourHandStyle.value = `transform: rotate(${hourDegrees}deg)`

  // 更新数字时间显示
  digitalTime.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`

  // 使用 requestAnimationFrame 实现平滑动画
  requestAnimationFrame(updateClock)
}

let clockInterval: number | null = null

onMounted(() => {
  // 启动时钟
  updateClock()
  clockInterval = setInterval(updateClock, 1000)
  
  // 启动打字效果
  typeText()
})

onUnmounted(() => {
  // 清理定时器
  if (clockInterval) clearInterval(clockInterval)
  if (typingInterval) clearTimeout(typingInterval)
})

// 添加鼠标移动处理
const homeRef = ref<HTMLElement | null>(null)
const mouseX = ref(0)
const mouseY = ref(0)

const handleMouseMove = (e: MouseEvent) => {
  if (!homeRef.value) return
  const rect = homeRef.value.getBoundingClientRect()
  mouseX.value = ((e.clientX - rect.left) / rect.width) * 100
  mouseY.value = ((e.clientY - rect.top) / rect.height) * 100
}
</script>

<style scoped>
.home {
  min-height: 100vh;
  position: relative;
  background: linear-gradient(125deg, #1a1a2e, #16213e, #0f3460);
  background-size: 400% 400%;
  padding: 40px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  animation: gradientBG 15s ease infinite;
}

.home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(2px 2px at 20px 30px, #ffffff77, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #ffffff88, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, #ffffff66, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #ffffff77, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #ffffff88, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ffffff66, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
  animation: stars 4s linear infinite;
  opacity: 0.5;
  z-index: 1;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes stars {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-200px);
  }
}

.cards-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: 30px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glass-card {
  position: relative;
  background: rgba(26, 26, 46, 0.3) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 204, 0.3) !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(0, 255, 204, 0.1) !important;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 60%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.glass-card:hover {
  transform: translateY(-5px);
  background: rgba(26, 26, 46, 0.4) !important;
  border-color: rgba(0, 255, 204, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 255, 204, 0.2) !important;
}

.glass-card:hover::after {
  transform: translateX(100%);
}

.date-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
}

.date-year {
  font-size: 1.3em;
  margin-bottom: 5px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.8),
               0 0 20px rgba(0, 255, 204, 0.4),
               0 0 30px rgba(0, 255, 204, 0.2);
  font-weight: 600;
}

.date-month {
  font-size: 1.2em;
  margin-bottom: 5px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.8),
               0 0 20px rgba(0, 255, 204, 0.4),
               0 0 30px rgba(0, 255, 204, 0.2);
  font-weight: 600;
}

.date-number {
  font-size: 3.5em;
  font-weight: bold;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.8),
               0 0 20px rgba(0, 255, 204, 0.4),
               0 0 30px rgba(0, 255, 204, 0.2);
  margin: 5px 0;
}

.date-text {
  font-size: 1.2em;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.8),
               0 0 20px rgba(0, 255, 204, 0.4),
               0 0 30px rgba(0, 255, 204, 0.2);
  margin-top: 5px;
  font-weight: 600;
}

.date-card {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(0, 255, 204, 0.2) !important;
}

.date-card:hover {
  border-color: rgba(0, 255, 204, 0.4) !important;
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.2) !important;
}

.second-hand {
  background: linear-gradient(90deg, #7f7fd5, #91eae4);
}

.minute-hand {
  background: rgba(255, 255, 255, 0.8);
}

.hour-hand {
  background: rgba(255, 255, 255, 0.9);
}

.skill-tag {
  background: rgba(26, 26, 46, 0.6) !important;
  border: 1px solid rgba(0, 255, 204, 0.3) !important;
  color: #fff !important;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
}

.skill-tag:hover {
  background: rgba(26, 26, 46, 0.8) !important;
  border-color: rgba(0, 255, 204, 0.5) !important;
  color: #00ffcc !important;
}

.welcome-content,
.blog-content,
.project-content,
.skills-content,
.date-content {
  position: relative;
  z-index: 1;
  color: white;
}

h3 {
  color: white !important;
}

.social-links {
  display: flex;
  gap: 20px;
}

.wave-emoji {
  display: inline-block;
  animation: wave 2s infinite;
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .home {
    padding: 20px;
  }
  
  .cards-container {
    gap: 20px;
  }
  
  .glass-card:hover {
    transform: none;
  }
}

/* 调整卡片内容样式 */
.welcome-content,
.blog-content,
.project-content,
.skills-content,
.date-content {
  position: relative;
  z-index: 1;
}

/* 添加卡片光晕效果 */
.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(125deg, rgba(255,255,255,0.2) 0%, transparent 60%);
  pointer-events: none;
}

/* 调整标签样式 */
.el-tag {
  background: rgba(26, 26, 46, 0.6) !important;
  border: 1px solid rgba(0, 255, 204, 0.3) !important;
  color: #fff !important;
}

.el-tag:hover {
  background: rgba(26, 26, 46, 0.8) !important;
  transform: translateY(-2px);
}

/* 调整社交链接样式 */
.social-links a {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
}

.social-links a:hover {
  color: #00ffcc;
  text-shadow: 0 0 20px rgba(0, 255, 204, 0.8);
}

.social-links a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.social-links a:hover::after {
  opacity: 1;
}

/* 博客列表动画 */
.blog-item {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.blog-item::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(78, 84, 200, 0.5), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.blog-item:hover::before {
  transform: translateX(100%);
}

/* 项目卡片动画 */
.project-item {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.project-item:hover {
  transform: translateX(10px);
  padding-left: 10px;
}

/* 打字效果优化 */
.typing-text {
  position: relative;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.8),
               0 0 20px rgba(0, 255, 204, 0.4),
               0 0 30px rgba(0, 255, 204, 0.2);
}

.typing-text::after {
  content: '|';
  position: absolute;
  right: -4px;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 调整时钟样式 */
.clock-face {
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  background: rgba(26, 26, 46, 0.6);
  border: 2px solid rgba(0, 255, 204, 0.5);
}

.center-dot {
  box-shadow: 0 0 10px rgba(255,0,0,0.3);
  background: #fff;
  border: 2px solid rgba(0, 255, 204, 0.8);
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
}

/* Frame 1: 日期卡片 */
.date-card {
  grid-column: span 2;
  grid-row: span 1;
  aspect-ratio: 1;
}

.date-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

/* Frame 2: 欢迎卡片 */
.welcome-card {
  grid-column: span 6;
  grid-row: span 1;
}

.welcome-content {
  height: 100%;
  padding: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 15px;
}

.welcome-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.welcome-title {
  font-size: 1.8em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.8),
               0 0 20px rgba(0, 255, 204, 0.4),
               0 0 30px rgba(0, 255, 204, 0.2);
}

.welcome-subtitle {
  font-size: 1.4em;
  color: #fff;
  opacity: 0.9;
  text-shadow: 0 0 8px rgba(0, 255, 204, 0.4),
               0 0 16px rgba(0, 255, 204, 0.2);
}

.welcome-description {
  font-size: 1em;
  color: #fff;
  opacity: 0.8;
  line-height: 1.4;
  text-shadow: 0 0 6px rgba(0, 255, 204, 0.3),
               0 0 12px rgba(0, 255, 204, 0.1);
}

/* Frame 3: 时钟卡片 */
.clock-card {
  grid-column: span 4;
  grid-row: span 1;
  padding: 15px;
}

.analog-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.clock-face {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  position: relative;
  background: rgba(26, 26, 46, 0.6);
  border: 2px solid rgba(0, 255, 204, 0.5);
}

.mark {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.mark-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  left: 50%;
  transform: translateX(-50%);
}

.hour-mark .mark-line {
  width: 2px;
  height: 15px;
  background: rgba(255, 255, 255, 0.8);
}

.mark:not(.hour-mark) .mark-line {
  width: 1px;
  height: 8px;
}

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  border-radius: 4px;
  background: #fff !important;
  box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
}

.hour-hand {
  width: 4px;
  height: 35px;
  margin-left: -2px;
  transition: none;
}

.minute-hand {
  width: 3px;
  height: 45px;
  margin-left: -1.5px;
  transition: none;
}

.second-hand {
  width: 2px;
  height: 50px;
  margin-left: -1px;
  transition: none;
}

.center-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid rgba(0, 255, 204, 0.8);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.digital-time {
  font-size: 1.4em;
  color: #fff;
  font-family: monospace;
  margin-top: 5px;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.8),
               0 0 20px rgba(0, 255, 204, 0.4),
               0 0 30px rgba(0, 255, 204, 0.2);
}

/* Frame 4: 博客卡片 */
.blog-card {
  grid-column: span 4;
  grid-row: span 1;
}

.blog-content {
  padding: 20px;
  color: white;
}

.blog-list {
  margin-top: 20px;
}

.blog-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.blog-date {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.4);
}

.blog-title {
  margin-left: 20px;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.8),
               0 0 20px rgba(0, 255, 204, 0.4),
               0 0 30px rgba(0, 255, 204, 0.2);
}

/* Frame 5: 项目卡片 */
.project-card {
  grid-column: span 4;
  grid-row: span 1;
}

.project-content {
  padding: 20px;
  color: white;
}

.project-list {
  margin-top: 20px;
}

.project-item {
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.project-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.project-title {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.8),
               0 0 20px rgba(0, 255, 204, 0.4),
               0 0 30px rgba(0, 255, 204, 0.2);
}

.project-desc {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 10px rgba(0, 255, 204, 0.4);
  margin: 5px 0;
}

/* Frame 6: 技能卡片 */
.skills-card {
  grid-column: span 4;
  grid-row: span 1;
}

.skills-content {
  padding: 20px;
  color: white;
}

.skills-list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-tag {
  margin: 5px;
}

@media (max-width: 1200px) {
  .cards-container {
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
  }

  .welcome-card {
    grid-column: span 8;
  }

  .clock-card,
  .blog-card,
  .project-card,
  .skills-card {
    grid-column: span 4;
  }
}
</style>